<template>
	<view class="wallet">
		<view class="black_1">
			USDT钱包仅支持绑定账户实名者本人银行卡。
		</view>
		<view class="black_2">
			<template v-for="(item,index) in list">
				<view class="item" @click="toAddType(item)">
					<view class="left">
						<view class="line_1">
							<image class="img" :src="'/static/tading/'+item.type+'.png'"></image>
							<text class="text1">{{getType(item)}}</text>
						</view>
						<text v-if="item.type == 'bank'" class="text2">{{item.data.real_name}}</text>
						<template v-if="item.type == 'bank' || item.type == 'rmb'">
							<view class="text3">{{item.data.bank_number}}</view>
						</template>
						<template v-else-if="item.type == 'usdt'">
							<view class="text3">{{item.data.money_address}}</view>
						</template>
						<template v-else >
							<view class="text3">{{item.data.account_name}}</view>
						</template>
					</view>
					<!-- <view class="right">
						<uni-icons type="trash" size="30" color="#7B7677"></uni-icons>
					</view> -->
				</view>
			</template>
		</view>

		<view class="bottom2" @click="addPay()">
			<view class="text1">添加收付款信息</view>
		</view>
		<addPayType ref="addPayType" :success='addTypeSucees'></addPayType>
	</view>
</template>

<script>
	import addPayType from '@/components/pay/addPayType.vue'
	export default {
		components: {
			addPayType
		},
		data() {
			return {
				list: [
					// {
					// 	"id": 0,
					// 	"user_id": 0,
					// 	"type": "wechat",
					// 	"network": null,
					// 	"data": {
					// 		"real_name": "",
					// 		"account_name": "",
					// 		"image": "../../static/my/add_tu.png"
					// 	},
					// }
				]
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.list.length =0
			this.getList()
		},
		methods: {
			addPay() {
				this.$refs.addPayType.open()

			},
			getList(){
				this.api.http.requests('exchangecollection/info', {}, res => {
					if (res.data && res.data.length > 0) {
						this.list = this.list.concat(res.data)
					}
				}, "POST")
				
			},
			getType(item){
				var name1 ="usdt"
							
				if(item.type == 'bank'){
					name1 ="银行卡"
				}
				if(item.type == 'alipay'){
					name1 ="支付宝"
				}
				if(item.type == 'wechat'){
					name1 ="微信"
				}
				if(item.type == 'usdt'){
					name1 ="USDT "+ item.network
				}
				if(item.type == 'rmb'){
					name1 ="数字人民币"
				}
				return name1
			},
			toAddType(item){
				var name1 ="usdt"
				var network =''
				if(item.type == 'bank'){
					name1 ="银行卡"
				}
				if(item.type == 'alipay'){
					name1 ="支付宝"
				}
				if(item.type == 'wechat'){
					name1 ="微信"
				}
				if(item.type == 'usdt'){
					network=  item.network
				}
				if(item.type == 'rmb'){
					name1 ="数字人民币"
				}
				var json={
					name:name1,
					type:item.type
				}
				this.addTypeSucees2(json,1,network)
			},
			addTypeSucees(item) {
				this.addTypeSucees2(item,0,'')
			},
			addTypeSucees2(item,isEdt,network) {
				uni.navigateTo({
					url: '/pages/my/addPay?type=' + item.type + '&name=' + item.name+'&isEdt='+isEdt+"&network="+network
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped lang="less">
	.wallet {
		.black_1 {
			background: #FFFBC8;
			padding: 10px;
			font-size: 12px;
			font-weight: 400;
			color: #FE903D;
		}

		.black_2 {
			margin-bottom: 50px;
		}

		.item {
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px;

			.left {
				
				.line_1{
					display: flex;
					align-items: center;
					.img {
						width: 20px;
						height: 20px;
					}
					
					.text1 {
						margin-left: 5px;
						font-size: 18px;
						font-weight: 800;
						color: #3A3A3A;
					}
				}
				

				.text1 {
					margin-left: 5px;
					font-size: 18px;
					font-weight: 800;
					color: #3A3A3A;
				}

				.text2 {
					margin-left: 5px;
					font-size: 18px;
					font-weight: 400;
					color: #B7B7B7;
				}

				.text3 {
					margin-top: 10px;
					font-size: 20px;
					font-weight: bold;
					color: #3A3A3A;
					width: 300px;//设置宽度
					overflow: hidden;//溢出隐藏
					text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
					white-space: nowrap;
				}

			}

		}


		.bottom2 {
			position: absolute;
			bottom: 10px;
			width: 100%;
			height: 49px;
			text-align: center;
			line-height: 49px;
			color: white;

			.text1 {
				margin: 0px 10px;
				border-radius: 8px 8px 8px 8px;
				background: #FE903D;
			}
		}
	}
</style>